import React from 'react';
import {DefaultOptionType} from "rc-select/lib/Select";
import {Button, Card, Form, Input, InputNumber, Select} from "antd";
import useAsyncEffect from "hooks/useAsyncEffect";

import DrpSettingHandler from "../DrpSettingHandler";
import DrpSetting from "../DrpSetting";
import {OTHER, RETURN, SALE, SERVICE, TRANSFER} from "../constant";
import {getClientOptions, getEngineOptions, getPartGroupOptions, getProviderOptions} from "../SeleteOptionHanlder";

const DrpSettingComponent = () => {
    const [loading,setLoading] = React.useState<boolean>(true) ;
    const [clientOptions,setClientOptions] = React.useState<DefaultOptionType[]>([]) ;
    const [providerOptions,setProviderOptions] = React.useState<DefaultOptionType[]>([]) ;
    const [partGroupOptions,setPartGroupOptions] = React.useState<DefaultOptionType[]>([]) ;
    const [engineOptions,setEngineOptions] = React.useState<DefaultOptionType[]>([]) ;

    useAsyncEffect( async ()=>{
        const [ eng,pro,par,cli ] = await Promise.all([
            getEngineOptions(),
            getProviderOptions(),
            getPartGroupOptions(),
            getClientOptions()
        ]) ;
        setEngineOptions(eng) ;
        setProviderOptions(pro) ;
        setPartGroupOptions(par) ;
        setClientOptions(cli) ;
        setLoading(false) ;
    });

    return (
        <Card title={"进销存页面设置"}>
            <Form<DrpSetting>
                // style={{maxWidth: "1000px"}}
                labelCol={{span: 6}}
                wrapperCol={{span: 10}}
                layout={"horizontal"}
                onFinish={DrpSettingHandler.getInstance().setConfig}
                initialValues={DrpSettingHandler.getInstance().getConfig()}
            >
                <Form.Item<DrpSetting> name={"username"} label={"当前用户"}>
                    <Input />
                </Form.Item>
                <Form.Item<DrpSetting> name={"partPageSize"} label={"零件管理页面"}>
                    <InputNumber min={1} max={100} />
                </Form.Item>
                <Form.Item<DrpSetting> name={"defaultOdoType"} label={"默认出库类型"}>
                    <Select>
                        <Select.Option value={SALE}>销售出库</Select.Option>
                        <Select.Option value={SERVICE}>服务出库</Select.Option>
                        <Select.Option value={TRANSFER}>调拨出库</Select.Option>
                        <Select.Option value={RETURN}>返货出库</Select.Option>
                        <Select.Option value={OTHER}>其他出库</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item<DrpSetting> name={"defaultClient"} label={"默认选择的用户"}>
                    <Select loading={loading} options={clientOptions}/>
                </Form.Item>
                <Form.Item<DrpSetting> name={"defaultProvider"} label={"默认选择供应商"}>
                    <Select loading={loading} options={providerOptions}/>
                </Form.Item>
                <Form.Item<DrpSetting> name={"defaultPartGroup"} label={"默认选择零件组"}>
                    <Select loading={loading} options={partGroupOptions}/>
                </Form.Item>
                <Form.Item<DrpSetting> name={"defaultEngine"} label={"默认选择的发动机编号"}>
                    <Select loading={loading} options={engineOptions}/>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                    <Button type={"primary"} htmlType={"submit"}>保存配置</Button>
                </Form.Item>
            </Form>
        </Card>
    );
};

export default DrpSettingComponent;